<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue</title>
  </head>
  <style type="text/css">
    .bg {
      background: #f00;
    }

    .font {
      font-size: 50px;
    }
  </style>
  <script src="./vue.js"></script>
  <body>
    <!-- 模板 -->
    <div id="example">
      <div :class="{bg:flag,font:flag}">{{ message }}</div>

      <!-- 如果想根据条件切换列表中的class，可以用三元表达式 -->
      <div :class="[ flag ? bgClass:'',fontClass]">{{ message }}</div>

      <!-- 不过，当有多个条件class时这样写有些繁琐。可以在数组语法中使用对象语法 -->
      <div :class="[{bg:!flag},fontClass]">{{ message }}</div>
    </div>

    <script>
      //数据

      let data = {
        message: 'vue学习计划',

        flag: true,

        bgClass: 'bg',

        fontClass: 'font'
      }

      //vm实例
      var vm = new Vue({
        el: '#example',

        data: data
      })
    </script>
  </body>
</html>
